<template>
  <div class="login">
    <img src="@/assets/background-pic.jpg" alt="">
    <div class="content-container">
      <div class="content">
        <div class="form">
          <h2>请登录</h2>
          <h4>欢迎来到图书管理系统</h4>
          <div>
            <input type="text" placeholder="用户名" v-model="state.username"/>
            <input type="password" placeholder="密码" v-model="state.password" @keyup.enter="login"/>
            <div class="btns">
              <button @click="login">登录</button>
              <button @click="reset">重置</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import { messageApi, } from '@/api/global.js'
import { reactive } from 'vue';
import { loginR } from '@/network/user.js'
import { useRouter } from 'vue-router';

const router = useRouter()
const state = reactive({
  // 用户名和密码
  username: 'admin',
  password: 'admin'
})


// 登录
const login = async () => {
  try{
    messageApi().closeAll()
    if (!state.username || !state.password) return messageApi('warning', '请输入用户名或密码！');
    const {data: res} = await loginR(state)
    if (res.code === 400) return messageApi('error', res.msg)
    // 将 token和用户信息保存到本地
    window.localStorage.setItem('token', res.token)
    window.localStorage.setItem('user',JSON.stringify(res.data))
    messageApi('success', res.msg)
    router.push('/home')
    if (res.data.is_admin === 'is') {
      ElNotification({
        title: res.data.username + '，欢迎登录',
        message: '管理员你好，本系统将对你开放所有权限！',
        type: 'success',
        offset: 50,
        duration: 0
      })
    } else {
      ElNotification({
        title: res.data.username + '，欢迎登录',
        message: '你不是管理员，本系统将你的权限进行限制！',
        type: 'success',
        duration: 0,
        offset: 50
      })
    }


  }catch(e) {
    messageApi('error', e)
  }

}

// 重置
const reset = () => {
  state.username = ''
  state.password = ''
}


</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
}
.login img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.content-container {
  width: 450px;
  height: 430px;
  background-color:  rgba(0, 0, 0, .45);
  border-radius: 10px;
  margin: 0 auto;
  position: absolute;
  top: 70px;
  left:  35%;
}
.content-container .form h2 {
  font-size: 45px;
  font-weight: 800;
  text-align: center;
  color: #fff;
  padding-top: 10px;
  margin-bottom: 30px;
}
.content-container .form h4 {
  padding-left: 155px;
  padding-bottom: 40px;
  margin-top: -20px;
  color: rgba(255, 255, 255, 0.778);
}
.content .form input {
  margin: 0 auto;
  width: 300px;
  height: 50px;
  margin-bottom: 30px;
  border-radius: 5px;
  outline: none;
  padding-left: 20px;
  font-size: 18px;
  border: none;
  margin-left:75px;
}
.content .btns {
  margin-left: 95px;
  width: 100%;
  margin-top: 30px;
}
.content .btns button {
  font-size: 16px;
  color: #fff;
  background-color: #2d4263;
  border: 2px solid rgba(255, 255, 255, 0.452);
  margin-bottom: 20px;
  width: 90px;
  height: 40px;
  margin-left: 30px;
  cursor: pointer;
  border-radius: 5px;
}

</style>